import { brain_space_speech, update_display_order } from '@/services/ant-design-pro/brainSpace';
import { Empty, message, Pagination } from 'antd';
import React, { useEffect, useState } from 'react';
import LongDocItem from '../LongDocItem';
import './index.less';
const dayjs = require('dayjs');

// 有历史记录组件
const ImportantTell: React.FC<any> = (props: any) => {
  const { title } = props;
  const [loaded, setLoaded] = useState(false); // 加载完成
  const [totalCount, setTotalCount] = useState(0); // 文章总数
  const [dataList, setDataList] = useState<any[]>([]); // 未选中文档列表

  //分页默认值，
  const [pageOption, setPageOption] = useState({
    page: 1, //当前页为1
    per_page: 10, //一页10行
  });

  // 时间格式
  const formatAtTime = (timestamp: any) => {
    return dayjs(timestamp).format('YYYY.MM.DD HH:mm:ss');
  };

  // 加载数据
  const loadMoreData = async (page: number, per_page: number) => {
    const res = await brain_space_speech({ page, per_page });
    if (res.code === 0) {
      if (res.data.articles && res.data.articles.length) {
        const { total_count, articles } = res.data;
        articles.forEach((v: any) => {
          v.release_time = v.updated_at ? formatAtTime(v.updated_at) : '-';
          v.deleteShow = false;
          v.showTitle = true;
        });
        setTotalCount(total_count);
        setDataList(articles);
      }
      setLoaded(true);
    } else {
      message.open({
        type: 'error',
        content: res.msg,
      });
    }
  };

  // 删除
  const handleDelete = async (item: any) => {
    const res = await update_display_order(item.cognitionId);
    if (res.code === 0) {
      // 删除成功
      message.open({
        type: 'success',
        content: '外删除成功',
      });
    } else {
      message.open({
        type: 'error',
        content: res.msg,
      });
    }
  };

  const paginationChange = async (current: number, size: number) => {
    setPageOption({
      page: current, //当前所在页面
      per_page: size, //一页有几行
    });
    loadMoreData(current, size);
  };

  //page变动时触发请求
  useEffect(() => {
    loadMoreData(pageOption.page, pageOption.per_page);
  }, []);

  return (
    <div className="ImportantTell p-r">
      <div className="page-container">
        <div className="statefulComponent">
          <div className="f-s-20 doc-title">{title ? title : '重要讲话空间'}</div>
          {dataList.length > 0 && (
            <div className="top-doc-box other-doc">
              <div className="docTypeListBox">
                {dataList.map((item: any) => {
                  return (
                    <LongDocItem
                      key={item.id}
                      item={item}
                      type="otherDoc"
                      titleType="name"
                      deleteData={handleDelete}
                    />
                  );
                })}
              </div>
            </div>
          )}
          {dataList.length === 0 && loaded && (
            <Empty className="empty" image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
          {dataList.length > 0 && (
            <div className="flex-jcon-end m-t-10">
              <Pagination
                current={pageOption.page}
                defaultCurrent={1}
                pageSize={pageOption.per_page}
                total={totalCount}
                showSizeChanger={false}
                onChange={paginationChange}
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
export default ImportantTell;
